<template>
  <div class="recommend-com">
    <ul ref="left" class="recommend-com-left">
      <!-- <li v-for="(item,index) in leftList" :key="index"> -->
      <router-link
        :to="'/cardinfo/' + item.postsId"
        v-for="(item,index) in leftList"
        :key="index"
        tag="li"
      >
        <img :src="item.coverImgUrl" alt />
        <div class="list-con">
          <p class="list-con-title">{{item.title}}</p>
          <div class="list-con-bot">
            <van-icon name="like" />
            <span>{{item.zan}}</span>
            <img :src="item.avatar" />
            <span>{{item.userName}}</span>
          </div>
        </div>
      </router-link>
      <!-- </li> -->
    </ul>
    <ul ref="right" class="recommend-com-right">
      <router-link
        :to="'/cardinfo/' + item.postsId"
        v-for="(item,index) in rightList"
        :key="index"
        tag="li"
      >
        <img :src="item.coverImgUrl" alt />
        <div class="list-con">
          <p class="list-con-title">{{item.title}}</p>
          <div class="list-con-bot">
            <van-icon name="like" />
            <span>{{item.zan}}</span>
            <img :src="item.avatar" />
            <span>{{item.userName}}</span>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
import { Recommend } from "../../api/forum-api";
// import { getCardInfo} from "../../api/forum-api";
export default {
  data() {
    return {
      list: [],
      leftList: [],
      rightList: []
    };
  },
  created() {
    Recommend().then(res => {
      if (res.code === 0) {
        this.list = res.rows;
        console.log(this.list);
        // this.leftList = this.list;
        // this.rightList = this.list;
        // console.log(this.$refs.left.offsetHeight)
        this.setList();
      } else {
        alert("请求失败");
      }
    });
  },
  methods: {
    //递归调用
    setList() {
      //判断逻辑：判断左右列表的高度，谁低放到谁的里面；所以需要先获取左右列表的高度
      //如果isList是true代表左边，false代表右边
      let isList;
      if (this.list.length === 0 || !this.$refs.left) {
        //数组内的元素都渲染完了或者跳转页面，结束调用
        return;
      }
      //判断左右列表的高度，把新内容放到低的那个列表
      //数据更新了，但是vue渲染是异步的，数据更新后页面不会立即渲染
      if (this.$refs.left.offsetHeight <= this.$refs.right.offsetHeight) {
        isList = true;
        this.leftList.push(this.list.shift());
      } else {
        isList = false;
        this.rightList.push(this.list.shift());
      }
      //调用函数
      // debugger
      this.$nextTick(() => {
        //这是页面已经更新了，可以获取左右列表的高度
        // if (isList) {
        //   //     //取数组里的最新一项（最后一项）
        //   // console.log(this.$refs.left)
        //   this.$refs.left.children[this.leftList.length - 1].firstElementChild.onload = () => {
        //     this.setList();
        //   };
        //   this.$refs.left.children[this.leftList.length - 1].firstElementChild.onerror = () => {
        //     this.setList();
        //   };
        // } else {
        //   this.$refs.right.children[this.rightList.length - 1].firstElementChild.onload = () => {
        //     this.setList();
        //   };
        //   this.$refs.right.children[this.rightList.length - 1].firstElementChild.onerror = () => {
        //     this.setList();
        //   };
        // }
        let imgDomObj = isList
          ? this.$refs.left.children[this.leftList.length - 1].firstElementChild
          : this.$refs.right.children[this.rightList.length - 1]
              .firstElementChild;
        imgDomObj.onload = imgDomObj.onerror = () => {
          this.setList();
        };
      });
    }
  }
};
</script>
<style lang="less" scoped>
.recommend-com {
  width: 100%;
  &-left,
  &-right {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 4px;
    li {
      padding: 5px;
      margin-bottom: 5px;
      border: 1px solid #8fbc8f;
      border-radius: 5px;
      img {
        width: 100%;
      }
      .list-con {
        width: 100%;
        // height: 25px;
        &-title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin: 5px 0;
        }
        &-bot {
          width: 100%;
          font-size: 12px;
          text-align: right;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-left: 5px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>